Tabs 标签页

2023-12-15 04:24| 来源: 网络整理| 查看: 265

Tabs 标签页 #

分隔内容上有关联但属于不同类别的数据集合。

基础用法 #

基础的、简洁的标签页。

卡片风格的标签 #

你可以设置具有卡片风格的标签。

带有边框的卡片风格 #

你还可以设置标签页为带有边框的卡片

标签位置的设置 #

可以通过 tab-position 设置标签的位置

自定义标签页的内容 #

可以通过具名插槽来实现自定义标签页的内容

动态增减标签页 #

增减标签页按钮只能在选项卡样式的标签页下使用

添加按钮自定义图标 2.4.0 #增加标签页触发器自定义 #Tabs 属性 #属性名说明类型可选值默认值model-value / v-model绑定值，选中选项卡的 namestring / number—第一个选项卡的 nametype风格类型stringcard/border-card—closable标签是否可关闭boolean—falseaddable标签是否可增加boolean—falseeditable标签是否同时可增加和关闭boolean—falsetab-position选项卡所在位置stringtop/right/bottom/lefttopstretch标签的宽度是否自撑开boolean-falsebefore-leave切换标签之前的钩子函数，若返回 false 或者返回被 reject 的 Promise，则阻止切换。Function(activeName, oldActiveName)——Tabs 事件 #事件名说明回调参数tab-clicktab 被选中时触发(pane: TabsPaneContext, ev: Event)tab-changeactiveName 改变时触发(name: TabPaneName)tab-remove点击 tab 移除按钮时触发(name: TabPaneName)tab-add点击 tab 新增按钮时触发—edit点击 tab 的新增或移除按钮后触发(paneName: TabPaneName | undefined, action: 'remove' | 'add')Tabs 插槽 #插槽名说明子标签-默认插槽Tab-paneaddIcon 2.4.0自定义添加按钮图标-Tab-pane 属性 #属性名说明类型可选值默认值label选项卡标题string——disabled是否禁用boolean—falsename与选项卡绑定值 value 对应的标识符，表示选项卡别名string / number—该选项卡在选项卡列表中的序数值，第一个选项卡为 '0'closable标签是否可关闭boolean—falselazy标签是否延迟渲染boolean—falseTab-pane 插槽 #插槽名说明-Tab-pane 的内容labelTab-pane 的标题内容源代码 #

组件 • 文档

贡献者 #